<template>
    <div class="page-container">
        <!-- 顶部操作栏 -->
        <div class="top-bar">
            <div class="left-actions">
                <el-button type="primary" @click="handleAdd">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增
                </el-button>
                <el-button type="danger" :disabled="!multipleSelection.length" @click="handleBatchDelete">
                    <el-icon>
                        <Delete />
                    </el-icon>
                    批量删除
                </el-button>
            </div>
            <div class="right-actions">
                <el-icon class="action-icon">
                    <Lightning />
                </el-icon>
                <el-icon class="action-icon">
                    <Lightning />
                </el-icon>
                <el-icon class="action-icon">
                    <Lightning />
                </el-icon>
            </div>
        </div>

        <!-- 数据表格 -->
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange"
            class="data-table" ref="multipleTableRef">
            <!-- 复选框列 -->
            <el-table-column type="selection" width="55" align="center" />

            <!-- 序号列 -->
            <el-table-column type="index" label="序号" align="center" width="80">

            </el-table-column>

            <!-- 商品编号列 -->
            <el-table-column prop="sid" label="商品编号" align="center">

            </el-table-column>

            <!-- 商品名称列 -->
            <el-table-column prop="storeName" label="商品名称" align="center">

            </el-table-column>

            <!-- 生产批次列 -->
            <el-table-column prop="batch" label="生产批次" align="center">

            </el-table-column>

            <!-- 保质期列 -->
            <el-table-column prop="expiration" label="保质期(天)" align="center">

            </el-table-column>

            <!-- 生产许可证号列 -->
            <el-table-column prop="license" label="生产许可证号" align="center">

            </el-table-column>

            <!-- 生产企业列 -->
            <el-table-column prop="company" label="生产企业" align="center">

            </el-table-column>
            <el-table-column prop="picture" label="图片" align="center">
                <template #default="scope">
                    <div v-if="hasValidImages(scope.row.picture)" class="multi-image-container">
                        <div v-for="(imageUrl, index) in getValidImages(scope.row.picture)" :key="index"
                            class="image-item"
                            :class="{ 'multiple-images': getValidImages(scope.row.picture).length > 1 }">
                            <img :src="imageUrl" alt="商品图片" @error="handleImageError" @load="handleImageLoad"
                                @click="showImagePreview(scope.row.picture, index)" style="cursor: pointer;">
                            <div v-if="getValidImages(scope.row.picture).length > 1" class="image-count">
                                {{ index + 1 }}/{{ getValidImages(scope.row.picture).length }}
                            </div>
                        </div>
                    </div>
                    <div v-else class="no-image">
                        <el-icon style="font-size: 40px; color: #ccc;">
                            <Picture />
                        </el-icon>
                        <span style="font-size: 12px; color: #999;">暂无图片</span>
                    </div>
                </template>
            </el-table-column>
            <!-- 信息完善度列 -->
            <el-table-column prop="completeness" label="信息完善度" align="center">

                <template #default="scope">
                    <el-tag :type="getCompletenessTagType(scope.row.completeness)" size="small">
                        {{ scope.row.completeness }}%
                    </el-tag>
                </template>
            </el-table-column>

            <!-- 操作列 -->
            <el-table-column label="操作" align="center" width="200">
                <template #default="scope">
                    <el-button type="primary" link size="small" @click="mx(scope.row.batch)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        详情
                    </el-button>
                    <el-button type="primary" link size="small" @click="handleEdit(scope.row)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        修改
                    </el-button>
                    <el-button type="primary" link size="small" @click="handleExport(scope.row)">
                        <el-icon>
                            <Download />
                        </el-icon>
                        导出溯源码
                    </el-button>
                    <el-button type="primary" link size="small" @click="handleDelete(scope.row)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog draggable v-model="dialogFormVisible" title="基本信息" width="500">
            <el-form :model="form">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-select v-model="form.sid" placeholder="请选择商品" clearable>
                        <el-option v-for="item in lists" :key="item.id" :label="item.storeName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="生产信息" :label-width="formLabelWidth">
                    <el-input v-model="form.batch" placeholder="请输入生产信息" />
                </el-form-item>
                <el-form-item label="保质期" :label-width="formLabelWidth">
                    <el-input v-model="form.expiration" placeholder="请输入保质期" />
                </el-form-item>
                <el-form-item label="生产许可证号" :label-width="formLabelWidth">
                    <el-input v-model="form.license" placeholder="请输入生产许可证号" />
                </el-form-item>
                <el-form-item label="生产企业" :label-width="formLabelWidth">
                    <el-input v-model="form.company" placeholder="请输入生产企业" />
                </el-form-item>
                <el-form-item label="封面图" :label-width="formLabelWidth">
                    <el-upload :file-list="fileList" action="http://localhost:5124/api/WriteBasic/UploadMultiple"
                        list-type="picture-card" name="files" :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove" :on-success="handleUploadSuccess" :on-error="handleUploadError"
                        :before-upload="beforeUpload" :multiple="true" :limit="5">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <div class="upload-tip">
                        <span>支持多图片上传，最多5张，每张图片不超过5MB</span>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleConfirm">
                        确认
                    </el-button>
                    <el-button type="info" @click="debugForm">
                        调试数据
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 二维码显示对话框 -->
        <el-dialog v-model="qrDialogVisible" title="溯源码二维码" width="400" center>
            <div class="qr-container">
                <div class="qr-info">
                    <h3>{{ currentRowData.storeName || '商品信息' }}</h3>
                    <p><strong>商品编号：</strong>{{ currentRowData.sid }}</p>
                    <p><strong>生产批次：</strong>{{ currentRowData.batch }}</p>
                    <p><strong>生产企业：</strong>{{ currentRowData.company }}</p>
                </div>
                <div class="qr-code">
                    <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="溯源码二维码" />
                </div>
                <div class="qr-tip">
                    <p>📱 使用手机扫描二维码查看商品详细信息</p>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="qrDialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="downloadQRCode">
                        <el-icon>
                            <Download />
                        </el-icon>
                        下载二维码
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 分页 -->
        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
            :page-sizes="[3, 5, 8, 10]" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination" />

        <!-- 图片预览对话框 -->
        <el-dialog v-model="imagePreviewVisible" title="图片预览" width="auto" center>
            <div class="image-preview-container">
                <!-- 左箭头 -->
                <div class="nav-arrow nav-left" @click="prevImage" :class="{ disabled: currentImageIndex === 0 }">
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                </div>

                <!-- 图片显示区域 -->
                <div class="image-display-area">
                    <img :src="currentImageUrl" alt="图片预览" class="preview-image" />
                </div>

                <!-- 右箭头 -->
                <div class="nav-arrow nav-right" @click="nextImage"
                    :class="{ disabled: currentImageIndex === previewImageList.length - 1 }">
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </div>
            </div>

            <!-- 分页指示器 -->
            <div class="pagination-dots" v-if="previewImageList.length > 1">
                <div v-for="(image, index) in previewImageList" :key="index" class="dot"
                    :class="{ active: index === currentImageIndex }" @click="goToImage(index)"></div>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="imagePreviewVisible = false">关闭</el-button>
                    <el-button type="primary" @click="downloadImage">下载图片</el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { read, tread, twrite } from '@/Until/axiosHepler'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete, Edit, Download, Lightning, Picture, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import axios from 'axios'
import { useCounterStore } from '@/stores/counter'
import QRCode from 'qrcode'
const stores = useCounterStore();
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const qrDialogVisible = ref(false)
const qrCodeUrl = ref('')
const currentRowData = ref<any>({})
const formLabelWidth = '140px'
import { useRouter } from 'vue-router'
const router = useRouter()
const mx = (batch: any) => {
    router.push({
        path: '/TraceabilityDetail',
        query: {
            batch: batch
        }
    })
}
import type { UploadProps } from 'element-plus'

const imageUrl = ref('')
const fileList = ref<any[]>([])

// 图片预览相关变量
const imagePreviewVisible = ref(false)
const previewImageList = ref<string[]>([])
const currentImageIndex = ref(0)
const currentImageUrl = ref('')

// 上传前验证
const beforeUpload = (file: File) => {
    const isImage = file.type.startsWith('image/')
    const isLt5M = file.size / 1024 / 1024 < 5

    if (!isImage) {
        ElMessage.error('只能上传图片文件!')
        return false
    }
    if (!isLt5M) {
        ElMessage.error('图片大小不能超过 5MB!')
        return false
    }

    return true
}

// 上传成功回调
const handleUploadSuccess = (response: any, file: any) => {
    console.log('上传成功响应:', response)
    console.log('上传文件信息:', file)

    // 检查服务器响应是否成功
    if (response && response.code !== 200) {
        console.error('服务器上传失败:', response.message)
        ElMessage.error('图片上传失败：' + (response.message || '服务器返回错误'))
        return
    }

    // 处理多图片上传响应 - 根据Swagger API格式
    let imageUrls: string[] = []

    if (response && response.code === 200) {
        if (Array.isArray(response.data) && response.data.length > 0) {
            // 后端返回的是URL数组
            imageUrls = response.data
            console.log('从response.data数组获取图片URLs:', imageUrls)
        } else if (response.data && typeof response.data === 'string') {
            // 后端返回的是单个URL字符串
            imageUrls = [response.data]
            console.log('从response.data字符串获取图片URL:', response.data)
        } else {
            console.warn('response.data为空或格式不正确:', response.data)
        }
    } else if (response && response.success === true) {
        // 兼容其他可能的响应格式
        if (Array.isArray(response.data) && response.data.length > 0) {
            imageUrls = response.data
        } else if (response.data) {
            imageUrls = [response.data]
        }
    } else if (typeof response === 'string' && response.startsWith('http')) {
        imageUrls = [response]
    } else if (response && response.url) {
        imageUrls = [response.url]
    }

    if (imageUrls.length > 0) {
        // 将新上传的图片URL添加到现有图片数组中
        form.picture = [...form.picture, ...imageUrls]
        console.log('图片URL已保存到form.picture:', form.picture)
        ElMessage.success(`图片上传成功，已保存${imageUrls.length}张图片`)
    } else {
        console.error('无法从响应中提取图片URL:', response)
        console.error('响应结构分析:')
        console.error('- response类型:', typeof response)
        console.error('- response.code:', response?.code)
        console.error('- response.data:', response?.data)
        console.error('- response.message:', response?.message)
        ElMessage.error('图片上传失败：无法获取图片地址')
    }
}

// 上传错误处理
const handleUploadError = (error: any, file: any) => {
    console.error('上传失败:', error)
    console.error('失败文件:', file)
    ElMessage.error('图片上传失败: ' + (error.message || '网络错误'))
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    form.picture = response;
}

// 响应式数据
const tableData = ref<any[]>([])
const selectedRows = ref<any[]>([])
const form = reactive({
    "sid": '',
    "batch": "",
    "expiration": '',
    "license": "",
    "company": "",
    "picture": [] as string[],

    "creator": stores.createApp.userName,

})
onMounted(() => {
    storelist();
})
const lists = ref<any[]>([]);
const storelist = () => {
    tread.get("/api/Basic/StoreList", {}).then((res) => {
        console.log('商品列表数据:', res)
        if (res.data && res.data.data) {
            lists.value = res.data.data
        } else {
            console.error('商品列表数据格式错误:', res.data)
            ElMessage.error('商品列表加载失败')
        }
    }).catch((error) => {
        console.error('获取商品列表失败:', error)
        ElMessage.error('商品列表加载失败: ' + error.message)
    })
}
// 分页数据
const page = reactive({
    pageIndex: 1,
    pageSize: 5,
    totalCount: 0,
    totalPage: 0
})

// 搜索表单
const searchForm = reactive({
    serialNo: '',
    sid: '',
    storeName: '',
    batch: '',
    expiration: '',
    license: '',
    company: '',
    completeness: '',

})
const multipleSelection = ref<any[]>([])
const multipleTableRef = ref()
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log('移除文件:', uploadFile, uploadFiles)

    // 从form.picture中移除对应的图片URL
    if (uploadFile.response) {
        const response = uploadFile.response as any
        let removedUrl = ''

        if (Array.isArray(response.data)) {
            removedUrl = response.data[0]
        } else if (response.data) {
            removedUrl = response.data
        } else if (response.url) {
            removedUrl = response.url
        } else if (typeof response === 'string') {
            removedUrl = response
        }

        if (removedUrl) {
            form.picture = form.picture.filter((url: string) => url !== removedUrl)
        }
    }

    // 更新fileList
    fileList.value = uploadFiles
    console.log('移除后的图片数组:', form.picture)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log('预览文件:', uploadFile)
    // 可以在这里添加图片预览功能
}
// 生命周期
onMounted(() => {
    List();
})

// 获取数据
const List = () => {
    axios.get("http://localhost:5159/api/Basic/GetBasicManagement", {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
            ...searchForm
        }
    }).then((res) => {
        console.log(res)
        if (res.data && res.data.data && res.data.data.data) {
            tableData.value = res.data.data.data
            page.totalCount = res.data.data.totalCount
            page.totalPage = res.data.data.totalPage

            // 调试图片数据
            console.log('=== 列表数据中的图片信息 ===')
            tableData.value.forEach((item, index) => {
                console.log(`第${index + 1}条数据:`, {
                    id: item.id,
                    sid: item.sid,
                    storeName: item.storeName,
                    picture: item.picture,
                    pictureType: typeof item.picture,
                    isValidUrl: isValidImageUrl(item.picture)
                })
            })
            console.log('========================')
        } else {
            console.error('API响应数据结构不正确:', res.data)
            ElMessage.error('数据加载失败，请检查API响应格式')
        }
    }).catch((error) => {
        console.error('API请求失败:', error)
        ElMessage.error('数据加载失败: ' + error.message)
    })
}

// 分页处理
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    page.pageSize = val
    List();
}

const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    page.pageIndex = val
    List();
}

// 选择处理
const handleSelectionChange = (selection: any[]) => {
    selectedRows.value = selection
    multipleSelection.value = selection
    console.log('选中的行:', selection)
    console.log('multipleSelection:', multipleSelection.value)
}

// 顶部操作按钮
const handleAdd = () => {
    // 重置表单
    Object.assign(form, {
        "sid": '',
        "batch": "",
        "expiration": '',
        "license": "",
        "company": "",
        "picture": [],
        "creator": stores.createApp.userName,
    })

    // 重置文件列表
    fileList.value = []

    dialogFormVisible.value = true
}

const handleBatchDelete = () => {
    const count = multipleSelection.value.length
    if (count == 0) {
        ElMessage.warning('请先选择要删除的数据')
        return
    }

    ElMessageBox.confirm(
        `确认要删除选中的 ${count} 条数据吗？`,
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const ids = multipleSelection.value.map(item => item.id)
            console.log('要删除的IDs:', ids)

            const res = await twrite.put('/api/WriteBasic/DelRangeBasic', { ids })
            if (res.data.code === 200) {
                ElMessage.success(`已删除 ${count} 个溯源商品`)
                List();
            } else {
                ElMessage.error('删除失败，请稍后再试')
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除已取消',
            })
        })
}

// 操作按钮功能
const handleEdit = (row: any) => {
    console.log('修改', row)
    ElMessage.info('修改功能开发中...')
}

const handleExport = async (row: any) => {
    console.log('导出溯源码', row)
    currentRowData.value = row

    try {
        // 生成包含商品信息的URL，手机扫码后可以访问
        const traceabilityUrl = `${window.location.origin}/traceability/detail/${row.sid}`

        // 生成二维码
        const qrCodeDataURL = await QRCode.toDataURL(traceabilityUrl, {
            width: 300,
            margin: 2,
            color: {
                dark: '#000000',
                light: '#FFFFFF'
            }
        })

        qrCodeUrl.value = qrCodeDataURL
        qrDialogVisible.value = true

        ElMessage.success('二维码生成成功')
    } catch (error) {
        console.error('生成二维码失败:', error)
        ElMessage.error('生成二维码失败')
    }
}

const handleDelete = (row: any) => {
    console.log('删除', row)
    ElMessage.warning('删除功能开发中...')
}

// 下载二维码
const downloadQRCode = () => {
    if (!qrCodeUrl.value) return

    const link = document.createElement('a')
    link.download = `溯源码_${currentRowData.value.storeName || currentRowData.value.sid}.png`
    link.href = qrCodeUrl.value
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    ElMessage.success('二维码下载成功')
}

// 确认按钮处理
const handleConfirm = () => {
    if (!form.sid) {
        ElMessage.warning('请选择商品名称')
        return
    }

    // 处理多图片数据，确保picture是有效的数组格式
    let pictureUrls: string[] = []
    if (Array.isArray(form.picture)) {
        pictureUrls = form.picture.filter(pic => isValidImageUrl(pic))
    } else if (typeof form.picture === 'string' && form.picture !== '' && form.picture !== '[]') {
        pictureUrls = [form.picture]
    }

    const submitData = {
        command: "AddBasic",
        ...form,
        picture: pictureUrls.length > 0 ? JSON.stringify(pictureUrls) : ""
    }

    console.log('提交表单数据到数据库:', submitData)
    console.log('图片URLs:', submitData.picture)

    twrite.post("/api/WriteBasic/AddBasic", submitData).then((res) => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.message || `添加成功，已保存${pictureUrls.length}张图片到数据库`)
            dialogFormVisible.value = false
            List()
        } else {
            ElMessage.error(res.data.message || "添加失败")
        }
    }).catch((error) => {
        console.error('提交失败:', error)
        ElMessage.error('提交失败: ' + (error.response?.data?.message || error.message))
    })
}

// 图片加载成功处理
const handleImageLoad = (event: Event) => {
    console.log('图片加载成功:', event.target)
}

// 图片加载失败处理
const handleImageError = (event: Event) => {
    console.error('图片加载失败:', event.target)
    const img = event.target as HTMLImageElement
    img.style.display = 'none'
}

// 验证图片URL是否有效
const isValidImageUrl = (url: string) => {
    if (!url || typeof url !== 'string') return false
    if (url === '' || url === '[]') return false
    if (!url.startsWith('http')) return false
    return true
}

// 检查是否有有效图片
const hasValidImages = (pictures: any) => {
    if (!pictures) return false

    if (typeof pictures === 'string') {
        try {
            const parsed = JSON.parse(pictures)
            if (Array.isArray(parsed)) {
                return parsed.some(pic => isValidImageUrl(pic))
            }
        } catch (e) {
            return isValidImageUrl(pictures)
        }
    }

    if (Array.isArray(pictures)) {
        return pictures.some(pic => isValidImageUrl(pic))
    }
    return isValidImageUrl(pictures)
}

// 获取有效图片数组
const getValidImages = (pictures: any) => {
    if (!pictures) return []

    if (typeof pictures === 'string') {
        try {
            const parsed = JSON.parse(pictures)
            if (Array.isArray(parsed)) {
                return parsed.filter(pic => isValidImageUrl(pic))
            }
        } catch (e) {
            return isValidImageUrl(pictures) ? [pictures] : []
        }
    }

    if (Array.isArray(pictures)) {
        return pictures.filter(pic => isValidImageUrl(pic))
    }
    return isValidImageUrl(pictures) ? [pictures] : []
}

// 调试表单数据
const debugForm = () => {
    console.log('=== 数据库图片信息 ===')
    console.log('form.picture类型:', typeof form.picture)
    console.log('form.picture值:', form.picture)
    console.log('是否为有效图片数组:', hasValidImages(form.picture))
    console.log('有效图片数量:', getValidImages(form.picture).length)
    console.log('==================')

    // 在页面上显示关键信息
    const validImages = getValidImages(form.picture)
    const info = `图片数量: ${validImages.length} (有效: ${hasValidImages(form.picture)})`
    ElMessage.info(info)
}



// 信息完善度标签类型
const getCompletenessTagType = (completeness: number) => {
    if (completeness >= 100) return 'success'
    if (completeness >= 80) return 'warning'
    return 'danger'
}

// 图片预览功能
const showImagePreview = (pictures: any, startIndex: number = 0) => {
    const validImages = getValidImages(pictures)
    if (validImages.length === 0) {
        ElMessage.warning('没有可预览的图片')
        return
    }

    previewImageList.value = validImages
    currentImageIndex.value = startIndex
    currentImageUrl.value = validImages[startIndex]
    imagePreviewVisible.value = true
}

// 上一张图片
const prevImage = () => {
    if (currentImageIndex.value > 0) {
        currentImageIndex.value--
        currentImageUrl.value = previewImageList.value[currentImageIndex.value]
    }
}

// 下一张图片
const nextImage = () => {
    if (currentImageIndex.value < previewImageList.value.length - 1) {
        currentImageIndex.value++
        currentImageUrl.value = previewImageList.value[currentImageIndex.value]
    }
}

// 跳转到指定图片
const goToImage = (index: number) => {
    currentImageIndex.value = index
    currentImageUrl.value = previewImageList.value[index]
}

// 下载图片
const downloadImage = () => {
    if (currentImageUrl.value) {
        const link = document.createElement('a')
        link.href = currentImageUrl.value
        link.download = `商品图片_${currentImageIndex.value + 1}.png`
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        ElMessage.success('图片下载成功')
    }
}
</script>

<style scoped>
.page-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
}

/* 顶部操作栏样式 */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.left-actions {
    display: flex;
    gap: 12px;
}

.right-actions {
    display: flex;
    gap: 12px;
}

.action-icon {
    font-size: 20px;
    color: #f39c12;
    cursor: pointer;
    transition: color 0.3s ease;
}

.action-icon:hover {
    color: #e67e22;
}

/* 表格样式 */
.data-table {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 表头样式 */
:deep(.el-table__header-wrapper) {
    background-color: #f8f9fa;
}

:deep(.el-table__header th) {
    background-color: #f8f9fa !important;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #e9ecef;
    padding: 12px 8px;
}

/* 列标题样式 */
.column-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.column-header span {
    font-weight: 600;
    color: #333;
}

.search-input {
    width: 100%;
}

.search-input :deep(.el-input__inner) {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
}

.search-input :deep(.el-input__inner:focus) {
    border-color: #409eff;
}

/* 表格行交替背景色 */
:deep(.el-table__body tr:nth-child(odd)) {
    background-color: #fff;
}

:deep(.el-table__body tr:nth-child(even)) {
    background-color: #fafafa;
}

/* 鼠标悬停效果 */
:deep(.el-table__body tr:hover) {
    background-color: #f0f9ff !important;
}

/* 表格边框样式 */
:deep(.el-table--border) {
    border: 1px solid #e9ecef;
}

:deep(.el-table--border td) {
    border-right: 1px solid #e9ecef;
    border-bottom: 1px solid #f1f3f4;
    padding: 12px 8px;
}

:deep(.el-table--border th) {
    border-right: 1px solid #e9ecef;
}

/* 操作按钮样式 */
:deep(.el-button--primary.is-link) {
    color: #409eff;
    font-size: 12px;
    padding: 4px 8px;
    margin: 0 2px;
}

:deep(.el-button--primary.is-link:hover) {
    color: #66b1ff;
}

:deep(.el-button--primary.is-link .el-icon) {
    margin-right: 4px;
}

/* 标签样式 */
:deep(.el-tag--success) {
    background-color: #f0f9ff;
    border-color: #67c23a;
    color: #67c23a;
}

:deep(.el-tag--warning) {
    background-color: #fdf6ec;
    border-color: #e6a23c;
    color: #e6a23c;
}

:deep(.el-tag--danger) {
    background-color: #fef0f0;
    border-color: #f56c6c;
    color: #f56c6c;
}

/* 分页样式 */
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* 二维码对话框样式 */
.qr-container {
    text-align: center;
    padding: 20px 0;
}

.qr-info {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    text-align: left;
}

.qr-info h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 18px;
}

.qr-info p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
}

.qr-code {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.qr-code img {
    max-width: 250px;
    max-height: 250px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-tip {
    margin-top: 15px;
    padding: 10px;
    background-color: #e3f2fd;
    border-radius: 6px;
    border-left: 4px solid #2196f3;
}

.qr-tip p {
    margin: 0;
    color: #1976d2;
    font-size: 14px;
}

/* 图片显示样式 */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f7fa;
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* 多图片容器样式 */
.multi-image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    max-width: 220px;
}

.image-item {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f7fa;
}

.image-item.multiple-images {
    width: 100px;
    height: 100px;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-count {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 1px 3px;
    border-radius: 2px 0 0 0;
}

.no-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    background: #fafafa;
    color: #999;
}

/* 上传提示样式 */
.upload-tip {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
    text-align: center;
}

/* 图片预览对话框样式 */
.image-preview-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: #f5f7fa;
    border-radius: 8px;
    overflow: hidden;
}

.image-display-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.preview-image {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    user-select: none;
    -webkit-user-select: none;
}

/* 导航箭头 */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.nav-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.nav-arrow.disabled:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(-50%) scale(1);
}

.nav-left {
    left: 20px;
}

.nav-right {
    right: 20px;
}

/* 分页指示器 */
.pagination-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9d9d9;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: #409eff;
    transform: scale(1.2);
}

.dot:hover {
    background: #409eff;
    opacity: 0.7;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .page-container {
        padding: 10px;
    }

    .top-bar {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .left-actions {
        justify-content: center;
    }

    .right-actions {
        justify-content: center;
    }

    .search-input {
        display: none;
    }

    .qr-code img {
        max-width: 200px;
        max-height: 200px;
    }

    .image-container,
    .no-image {
        width: 80px;
        height: 80px;
    }
}
</style>